<template>
    <Tree ref="ouTree" :data="treeData" :show-checkbox="check" :check-strictly="checkStrictly" :check-directly="checkDirectly"></Tree>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
    components: {},
})
export default class OUTree extends AbpBase {
    name: string = 'OUTree';

    @Prop({type: Boolean, default: false}) click: boolean;
    @Prop({type: Boolean, default: false}) check: boolean;
    @Prop({type: Boolean, default:false}) checkStrictly: boolean;
    @Prop({type: Boolean, default:false}) checkDirectly: boolean;


    @Watch('click')
    checkChange(newVal: boolean) {
        if (!newVal) {
            this.recursiveTree((this.$refs.ouTree as any).data);
        }
    }


    recursiveTree(data) {
        for (const i of data) {
            this.$set(i, 'selected', false);
            if (i.children.length > 0) {
                this.recursiveTree(i.children)
            }
        }
    }

    get treeData() {
        return this.getTreeData(null);
    }

    getTreeData(parentId: number) {
        let array: any[] = [];
        const ous = this.$store.state.ou.list;
        ous.forEach((item) => {
            if (item.parentId === parentId) {
                let n: any = {};
                n.title = `${item.displayName}（${item.memberCount}）`;
                n.expand = true;
                n.extra = item;
                n.render = (h, {root, node, data}) => {
                    return this.renderNode(h, {root, node, data});
                };
                n.children = this.getTreeData(item.id,);
                array.push(n);
            }
        });
        return array;
    }

    renderNode(h, {root, node, data}) {
        return h('span', {
            on: {
                click: () => {
                    this.handleClickSpan({root, node, data});
                },
            },
        }, data.title);
    }

    handleClickSpan(args: any) {
        this.$store.commit('ou/setCurrentOU', {
            ou: args.data.extra,
        });
        this.$emit('click-node');
    }

    getCheckedNodes() {
        let data: number[] = [];
        (this.$refs.ouTree as any).getCheckedNodes().forEach((item) => {
            data.push(item.extra.id);
        });
        return data;
    }

    setCheckedNode(treeData: any[], organizationUnits: number[]) {
        for (let node of treeData) {
            this.$set(node, 'checked', false);
            this.$set(node, 'indeterminate', false);
            for (let id of organizationUnits) {
                if (id === (node as any).extra.id) {
                    this.$set(node, 'checked', true);
                    break;
                }
            }
            if ((node as any).children) {
                this.setCheckedNode((node as any).children, organizationUnits);
            }
        }
    }


    async created() {
        await this.$store.dispatch({
            type: 'ou/getOrganizationUnits',
        });
    }
}
</script>

<style lang="less" scoped>

</style>
